<template>
    <div class="bottom">
        <div class="b-content">
            <ul class="nav">
                <li v-for="(item, index) in bottomNavItems" :key="index"
                    :class="{ active: currentBottomPage === item.name }" @click="selectBottomPage(item.name)">
                    <div class="link">
                        <span>{{ item.label }}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const bottomNavItems = [
    { name: 'recommend', label: '推荐' },
    { name: 'rankinglist', label: '排行榜' },
    { name: 'songlist', label: '歌单' },
    { name: 'blog', label: '播客' },
    { name: 'singer', label: '歌手' },
    { name: 'newdiscpublish', label: '新碟上架' }
]

const emit = defineEmits<{
    (e: 'changeTab', page: string): void;
}>();

const currentBottomPage = ref('recommend')
const selectBottomPage = (page: string) => {
    currentBottomPage.value = page
    emit('changeTab', page);
}

const showSubNav = ref(false)
</script>

<style lang="scss" scoped>
.bottom {
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;

    .b-content {
        width: 1100px;
        height: 34px;
        margin: 0 auto;

        .nav {
            display: flex;
            padding-left: 180px;

            li {
                height: 34px;
                text-align: center;

                .link {

                    span {
                        display: inline-block;
                        height: 20px;
                        padding: 0 13px;
                        margin: 7px 17px 0;
                        border-radius: 20px;
                        line-height: 21px;
                        font-size: 12px;
                        color: #fff;

                        &:hover {
                            background-color: #a40011;
                        }
                    }
                }

                &.active .link span {
                    background-color: #a40011;
                }
            }
        }
    }
}
</style>
